<template>
  <div ref="myAssetChart" :style="{ width: '80%', height: '240px' }"></div>
</template>

<script>
import mixins from '../mixin';
import { mapState } from 'vuex';

export default {
  name: 'asset-view',
  mixins: [mixins],
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      colorList: [],
    };
  },
  computed: {
    ...mapState('vxadmin/theme', ['activeName']),
  },
  watch: {
    // 监听主题变化，赋值新的颜色组合
    activeName(newVal) {
      if (newVal === 'vx') {
        this.colorList = ['#4072EE', '#FFA36B'];
      } else if (newVal === 'red') {
        this.colorList = ['#FB1C31', '#222222'];
      }
      this.setupOptions();
    },
  },
  created() {
    if (this.activeName === 'vx') {
      this.colorList = ['#4072EE', '#FFA36B'];
    } else if (this.activeName === 'red') {
      this.colorList = ['#FB1C31', '#222222'];
    }
  },
  methods: {
    setupOptions: function() {
      let chartEnv = { el: this.$refs.myAssetChart, baseOptions: {} };

      let _that = this;
      chartEnv.baseOptions = {
        color: _that.colorList,
        tooltip: {
          trigger: 'item',
          formatter: '{b} <br/>  {c}: ({d}%)',
        },
        legend: {
          orient: 'vertical',
          right: 'right',
          top: 'middle',
          data: ['总资产', '总负债'],
          icon: 'circle',
          formatter: function(name) {
            let target = '';
            for (let i = 0; i < _that.data.length; i++) {
              if (_that.data[i].name == name) {
                target = _that.$options.filters['numberFilter'](_that.data[i].value, 2);
              }
            }
            var arr = ['{a|' + name + '}', '{b|￥}{c|' + target + '}'];
            return arr.join('\n');
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 14,
                fontWeight: 600,
                verticalAlign: 'top',
                align: 'left',
                padding: [0, 0, 30, 0],
              },
              b: {
                fontSize: 14,
                align: 'center',
                padding: [0, 0, 10, 0],
                color: '#3b4c87',
              },
              c: {
                fontSize: 20,
                fontWeight: 600,
                align: 'center',
                padding: [0, 0, 10, 0],
                lineHeight: 25,
                color: '#3b4c87',
              },
            },
          },
        },
        series: [
          {
            name: '',
            // 类型，饼图
            type: 'pie',
            // 圆心位置，（横，纵）
            center: ['35%', '50%'],
            // 饼图的半径
            radius: ['30%', '70%'],
            label: {
              position: 'inner',
              fontSize: 12,
            },
            data: _that.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      return chartEnv;
    },
  },
};
</script>
